<template>
  <div class="login-common">
    <div class="replay-header" @click="backTo()">
      <div class="return-head-left">
        <img class="return-back" src="../../../static/images/qi.png" alt="">
      </div>
      <div class="return-right">
        <span class="return-back-text">{{showTitle}}注册</span>
      </div>
    </div>
    <div class="login-common-content">
      <div class="login-common-content-one">
        <div class="login-common-content-one-image">
          <span class="login-common-content-one-image-style">姓名</span>
        </div>
        <div class="login-common-content-one-input" >
          <input placeholder="请输入姓名" v-model="userName" class="login-common-content-one-input-style" type="text">
        </div>
      </div>
      <div class="login-common-content-one">
        <div class="login-common-content-one-image">
          <span class="login-common-content-one-image-style">电话</span>
        </div>
        <div class="login-common-content-one-input">
          <input placeholder="请输入手机号码" v-model="phone" class="login-common-content-one-input-style" type="text">
        </div>
      </div>
      <div class="login-common-content-one">
        <div class="login-common-content-one-image">
          <span class="login-common-content-one-image-style">部门</span>
        </div>
        <div class="login-common-content-one-input">
          <div style="text-align:left;margin-left:0.9rem;" class="login-common-content-one-input-style"  @click="selectMyDepartment()">{{department.text}}</div>
          <!--<input placeholder="请选择部门" v-model="mod_return_money" @click="selectFa()" class="login-common-content-one-input-style" >-->
        </div>
      </div>
      <div class="login-common-content-one" v-if="carOwner==1">
        <div class="login-common-content-one-image">
          <span class="login-common-content-one-image-style">车牌号</span>
        </div>
        <div class="login-common-content-one-input">
          <input placeholder="请输入车牌号" v-model="carNum" class="login-common-content-one-input-style" type="text">
        </div>
      </div>
      <div class="login-common-content-one" v-if="carOwner==1">
        <div class="login-common-content-one-image">
          <span class="login-common-content-one-image-style">可搭人数</span>
        </div>
        <div class="login-common-content-one-input">
          <input placeholder="请输入人数" v-model="loadNum" class="login-common-content-one-input-style" type="int">
        </div>
      </div>

      <div class="login-common-content-one" >
        <div class="login-common-content-one-image">
          <span class="login-common-content-one-image-style">出发位置</span>
        </div>
        <div class="login-common-content-one-input" @click="selectPosition()">
          <input disabled placeholder="请选择位置"   v-model="address" class="login-common-content-one-input-style" type="text">
        </div>
      </div>
      <div class="login-common-content-one">
        <div class="login-common-content-one-image">
          <span class="login-common-content-one-image-style">备注</span>
        </div>
        <div class="login-common-content-one-input" >
          <input placeholder="你的特别说明" v-model="comment" class="login-common-content-one-input-style" type="text" maxlength="10">
        </div>
      </div>
      <!--<div class="login-common-content-one">-->
        <!--<div class="login-common-content-one-image">-->
          <!--<span class="login-common-content-one-image-style">备注</span>-->
        <!--</div>-->
        <!--<div class="login-common-content-one-input" style="display:flex;align-items: center;justify-content: center">-->
          <!--&lt;!&ndash;<input placeholder="你的特别说明" v-model="comment" class="login-common-content-one-input-style" type="text" maxlength="200">&ndash;&gt;-->
          <!--<textarea name="" id="" v-model="comment" style="margin-top:0.3rem;height:0.8rem" placeholder="你的特别说明" maxlength="200" class="login-common-content-one-input-style textarea-style" ></textarea>-->
        <!--</div>-->
      <!--</div>-->
      <div class="login-common-content-one">
        <div class="login-common-content-one-image">
          <span class="login-common-content-one-image-style">密码</span>
        </div>
        <div class="login-common-content-one-input">
          <input placeholder="请输入6位数字密码" v-model="password" class="login-common-content-one-input-style" type="password">
        </div>
      </div>
    </div>
    <div class="login-common-footer">
      <div class="login-common-footer-bottom">
        <div class="login-common-footer-bottom-style"  @click="loginIn()">
          <span class="login-common-footer-bottom-text">注册</span>
        </div>
      </div>
    </div>
    <van-popup
      v-model="showSelect"
      position="bottom"
    >
      <van-picker show-toolbar :columns="departments"   @change="onDepartmentChange"
                  @cancel="showSelect = false"
                  title="请选择"
                  @confirm="selectDepartment"

      />

    </van-popup>
  </div>


</template>

<script>
  import Vue from 'vue';
  import { Toast ,Dialog,Picker,Popup,Overlay} from 'vant';
  import { isphoneNumber, toast ,checkPassword,checkCarNum,isEmpty} from '../../tools'

  Vue.use(Toast).use(Dialog).use(Picker).use(Popup).use(Overlay)

    export default {
      name: "register",
      data(){
        return{
          comment:"",
          carOwner:0,
          userName:'',
          password:'',
          department:{
            text:'GCS-APPD-CD',
            id:0
          },
          loadNum:0,
          carNum:'',
          phone:'',
          longitude:0,
          latitude:0,
          address:'',
          showTitle:'',
          departments:[
            {
              text:'GCS-APPD-CD',
              id:0
            },
            {
              text:'GCS-SYSD-CD',
              id:1
            },
            {
              text:'GCS-SPMD-CD',
              id:2
            },
            {
              text:'SPC-SPMD-CD',
              id:3
            },
            {
              text:'VAL-GCS-CD',
              id:4
            },
            {
              text:'HR&Admin-CD',
              id:5
            }
          ],
          showSelect:false,
        }
      },
      components:{
        "van-dialog":Dialog,
        "van-overlay":Overlay,
        "van-picker":Picker,
        "van-popup":Popup
      },
      mounted(){

        if(this.$route.query.isFromSelectMap){
          this.carOwner = localStorage.getItem("reg_carOwner")
          this.phone = localStorage.getItem("reg_phone")
          this.userName = localStorage.getItem("reg_userName")
          this.password = localStorage.getItem("reg_password")
          this.department.id = localStorage.getItem("reg_id")
          this.department.text = localStorage.getItem("reg_text")
          this.comment = localStorage.getItem("reg_comment")
          // comment
          if(this.carOwner === '1' || this.carOwner === 1){
            this.loadNum = localStorage.getItem("reg_loadNum")
            this.carNum = localStorage.getItem("reg_carNum")
          }
          this.longitude = localStorage.getItem("reg_longitude")
          this.latitude = localStorage.getItem("reg_latitude")
          this.address = localStorage.getItem("reg_address")
        }else {
          this.carOwner = this.$route.query.id;
        }
        if(this.carOwner === 1 || this.carOwner === "1"){
          this.showTitle = "车主"
        }else{
          this.showTitle = "乘客"
        }
      },
      methods:{
        selectPosition(){
          this.$router.push("selectMap")

          localStorage.removeItem("reg_carOwner");
          localStorage.removeItem("reg_phone");
          localStorage.removeItem("reg_userName");
          localStorage.removeItem("reg_password");
          localStorage.removeItem("reg_id");
          localStorage.removeItem("reg_text");
          localStorage.removeItem("reg_loadNum");
          localStorage.removeItem("reg_carNum");
          localStorage.removeItem("reg_longitude");
          localStorage.removeItem("reg_latitude");
          localStorage.removeItem("reg_address");
          localStorage.removeItem("reg_comment")

          localStorage.setItem("reg_carOwner",this.carOwner)
          localStorage.setItem("reg_phone",this.phone)
          localStorage.setItem("reg_userName",this.userName)
          localStorage.setItem("reg_password",this.password)
          localStorage.setItem("reg_id",this.department.id)
          localStorage.setItem("reg_text",this.department.text)

          localStorage.setItem("reg_longitude",this.longitude)
          localStorage.setItem("reg_latitude",this.latitude)
          localStorage.setItem("reg_address",this.address)
          localStorage.removeItem("setItem",this.comment)

          if(this.carOwner === 1 || this.carOwner === "1"){
            localStorage.setItem("reg_loadNum",this.loadNum)
            localStorage.setItem("reg_carNum",this.carNum)
          }
        },

        selectMyDepartment() {
          this.showSelect = true
        },

        onDepartmentChange(value) {
          this.department = value
        },

        selectDepartment(value){
          this.department = value
          this.showSelect = false
          //此时返回的value就是个对象了
          console.log('当前值'+this.department.text + '当前索引'+this.department.id);
          console.log(value)
        },
        backTo(){
          this.$router.push({
            name:"login",
            query:{
              id:this.carOwner
            }
          })
        },
        loginIn:function(){
          if(isEmpty(this.userName)){
            Toast( '请输入姓名' );
            return;
          }
          if(!isphoneNumber(this.phone)){
            Toast( '请输入正确手机号' );
            return;
          }
          if(!checkPassword(this.password)){
            Toast( '请输入正确密码' );
            return;
          }

          if(!this.longitude || !this.latitude || !this.address){
            Toast( '请选择出发位置' );
            return;
          }
          if(!this.department){
            Toast( '请选择部门' );
            return;
          }
          let that = this;
          if(this.carOwner === 1 || this.carOwner === "1"){
            if(!checkCarNum(this.carNum)){
              Toast( '请输入正确车牌号' );
              return;
            }
            if(!this.loadNum){
              Toast( '请输入可搭人数' );
              return;
            }
            console.log("------"+that.userName)
            this.$httpPostService('/register',{
              carOwner:that.carOwner,
              phone:that.phone,
              password:that.password,
              name:that.userName,
              department:that.department.id,
              address:that.address,
              longitude:that.longitude,
              latitude:that.latitude,
              carNum:that.carNum,
              loadNum:that.loadNum,
              comment:that.comment
            }).then(res => {
              console.log("res",res);
              if(res.error_code === 0){
                this.$router.push({
                  name:'login',
                  query:{
                    id:1
                  }
                })
              }else if(res.error_code === 1){
                toast("请检查参数")
              }else if(res.error_code === 2){
                toast("该手机号已注册")
              }
            }).catch(err => {
              console.log(err)
            })
          }else {
            this.$httpPostService('/register',{
              carOwner:that.carOwner,
              phone:that.phone,
              password:that.password,
              name:that.userName,
              department:that.department.id,
              address:that.address,
              longitude:that.longitude,
              latitude:that.latitude,
              comment:that.comment
            }).then(res => {
              console.log(res);
              if(res.error_code === 0){
                this.$router.push({
                  name:'login',
                  query:{
                    id:0
                  }
                })
              }else if(res.error_code === 1){
                toast("请检查参数")
              }else if(res.error_code === 2){
                toast("该手机号已注册")
              }
            }).catch(err => {
              console.log(err)
            })
          }
        },

      }
    }
</script>
<style lang="less" scoped>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    /*width: 7rem;*/
    height: 5rem;
    position:relative;
    /*border-radius:0.4rem;*/
    background-color: #fff;
    img{
      /*width:7rem;*/
      height:5rem;
    }
    .btn-style{
      width:3rem;
      height:0.8rem;
      border-radius:0.2rem;
      text-align:center;
      line-height:0.8rem;
      background:#FF5A00;
      color:#fff;
      font-size:0.4rem;
      position:absolute;
      top:80%;
      left:30%;
    }
  }
</style>

<style scoped lang="less" src="../../assets/less/register.less"></style>
